<template>
    <div class="bod">
        <div class="tab-content" >
            <div class="tab-content-in" >
                <ul class="list-ul">
                    <li class="list-li" v-for="(item,indexx) in CommentList" :key="item.userId">
                        <div class="left-info">
                            <img :src="item.headImgUrl" alt="" v-if="0==item.anonymous">
                            <img src="../../../assets/personal/images/niming.png" alt="" v-else>
                        </div>
                        <div class="right-info">
                            <div class="name" v-if="0==item.anonymous">{{item.nickName}}</div>
                             <div class="name" v-else>匿名用户</div>
                            <div class="commodity-info">
                                <span class="time">{{item.ctime| formatDateTIME}}</span>
                                <span class="color" v-show="false"> 颜色分类：白色连衣裙</span>
                                <span class="size" v-show="false"> 尺码：XL</span>
                            </div>
                            <div class="text-details">
                               {{item.commentContent}}
                            </div>
                                <div id="images_show" v-for="(itemm,ind) in item.arimgs"  :key="ind" v-if="itemm!=''">
                                    <img :src="itemm" >
                                </div>                          
                        </div> 
                        <div class="clearfix"> </div>
                           <div class="Allevaluation">
                                <h1><img style="width:20px;height:20px; margin:0 4px; vertical-align: middle" src="../../../assets/personal/images/tubiaozzz.png">全部评论<i v-if="0!=item.commentTotal">({{item.commentTotal}})</i></h1>
                                <ul class="head_ul" v-if="commentLists.length>0">
                                   <li class="marg_top" v-for="(item_s,ind_2) in commentLists" :key="item_s.id" >
                                      <div class="left-info">
                                         <img :src="item_s.headImgUrl" alt="">
                                      </div>
                                      <div class="right-info">
                                         <div class="name">{{item_s.nickName}}</div>
                                           <div class="commodity-info">
                                             <span class="time">
                                                 {{item_s.ctime | formatDateTIME}}
                                                 <a style="margin:0 10px; color:blue;" v-if="useid==item_s.userId" @click="del(item_s.id)">删除</a>
                                                 <div style="margin-left:80%;margin-top:-16px;">
                                                    <img class="zan_erji" src="../../../assets/personal/images/zan.png" v-if="'Yes'!=item_s.thumpsUpType"  @click="thumbsUP_er(item_s.id,ind_2)" >
                                                     <img class="zan_erji" src="../../../assets/personal/images/zan-active.png"  v-else @click="thumbsUP_er(item_s.id,ind_2)" >
                                                     点赞{{item_s.thumbsUp}}
                                                </div>
                                            </span>
                                        </div>
                                      <div class="text-details" style="margin-bottom:20px;">
                                         {{item_s.commentContent}}
                                     </div>                        
                                    </div> 
                                   </li>
                                </ul>
                                 <ul class="head_ul" v-else>
                                    <p class="text_alin">暂无人评论，来当第一个评论者吧！</p> 
                                 </ul>
                            </div>
                             <div class="clearfix"></div>
                             <div class="bottom-info" v-show="bottominfo">
                                <span class="liulan"></span>
                                <a >
                                   <span class="cmt" @click="pinglun"><img src="../../../assets/business/images/comment-icon.png">评论</span>
                                </a>
                                   <span class="zan" @click="thumbsUp(item.id,indexx)">
                                       <img src="../../../assets/personal/images/zan.png" v-if="'Yes'!=item.thumpsUpType">
                                       <img src="../../../assets/personal/images/zan-active.png" v-else>
                                       点赞</span>
                            </div>  
                            <div class="pinglun_text" v-show="pinglun_style">
                                <input type="text" placeholder="请填写评论" v-model="pinglun_text">
                                <span  @click="pinglun" v-if="1==quxiao">取消</span>
                                <span  @click="pinglun_btn" v-else>评论</span>
                            </div>                 
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<style scoped>
    @import "../../../assets/personal/css/commodity_details.css";
    .text_alin{
        width: 100%;
        margin:0 auto;
        text-align: center;
    }
    .head_ul{
        height: 400px;
        overflow: scroll;
    }
    .pinglun_text input{
      width:80%;
    }
    .bod{
        background: #e5e5e5;
        margin-top: -5px;
        padding-top: 15px;
    }
    .clearfix{
        clear: both;
    }
    #images_show img{
       width: 80%;
       max-height: 400px;
       margin: 6px auto
    }
    .Allevaluation{
        width: 100%;
       margin-top:30px;
       text-align: left;
    }
    .Allevaluation h1{
        font-size: 15px;
        padding-left: 15px;
        width:100%;
        line-height: 25px;
        border-bottom: 1px solid black;
    }
    .bottom-info{
        margin-top:15px;
    }
    .cmt,.zan{
       width:50%;
       border: 1px solid rgba(0,0,0,0.5);
       display: block;
       line-height: 40px;
       float: left;
      
    }
    .cmt img,.zan img{
        width:14px;
        height: 14px;
        margin: 0 3px;
        vertical-align: middle;
    }
    .marg_top{
        margin-top:20px ;
    }
    .zan_erji{
        width: 14px;
        height: 14px;
        margin:0 3px;
    }
    .i_right{
       text-align: right;
       display: block;
       width: 100%;
    }
</style>

<script>
export default {
    data () {
        return {
            CommentList:{},
            commentLists:{},
            commentPls_id:this.$route.query.godid,
            pinglun_style:false,
            bottominfo:true,
            pinglun_text:'',
            quxiao:1,
            companyId:this.$route.query.companyId,
            goodsID:this.$route.query.goodsID,
            useid:''
        }
    },
    mounted(){
      this.comment();
      this.infor()
    },
    methods:{
        thumbsUp:function(ping_id,inde,ind_2){//第一级点赞
                 this.$http.put(this.APIURL_PREFIX + '/api/wap/comment/thumbsUp', $.param({id:ping_id})).then((response) => {
                   if("Yes"==this.CommentList[inde].thumpsUpType){
                      this.CommentList[inde].thumpsUpType="NO"
                   }else{
                      this.CommentList[inde].thumpsUpType="Yes"
                   }     
                 }).catch(function (err) {
                }); 
        } ,
        thumbsUP_er:function(ping_id ,ind_2){//第二级点赞
             this.$http.put(this.APIURL_PREFIX + '/api/wap/comment/thumbsUp', $.param({id:ping_id})).then((response) => {
                   if("Yes"== this.commentLists[ind_2].thumpsUpType){
                      this.commentLists[ind_2].thumpsUpType="NO"
                      this.commentLists[ind_2].thumbsUp= this.commentLists[ind_2].thumbsUp-1
                   }else{
                       this.commentLists[ind_2].thumpsUpType="Yes"
                       this.commentLists[ind_2].thumbsUp= this.commentLists[ind_2].thumbsUp+1
                   }     
                 }).catch(function (err) {
                }); 
        },
        pinglun:function(){//样式操作
            this.pinglun_style=!this.pinglun_style
            this.bottominfo=!this.bottominfo
        },
       pinglun_btn:function(){
             this.$http.post(this.APIURL_PREFIX+'/api/wap/commentPls/goods',$.param({parentId:this.commentPls_id,commentContent:this.pinglun_text,commentType:3,goodsId:this.goodsID,companyId:this.companyId})).then((response) => {
              console.log("成功了")
              layer.msg("评论成功")
               this.pinglun_style=!this.pinglun_style
               this.bottominfo=!this.bottominfo
               this.pinglun_text=''
               this. comment()
          }).catch(function(err){
              console.log(err);
          });
       },
       comment(){//评论
            this.$http.get(this.APIURL_PREFIX+"/api/wap/commentPls/goods",{ params:{id:this.commentPls_id}}).then((response) => {   
                console.log("执行了")                  
                var arXX = response.data.data.commentList
                arXX = arXX.map(function(item,index,ar){
                    item.arimgs = item.imgContent.split(",");
                    return item;
                })                       
               this.CommentList=arXX
               this.commentLists=response.data.data.commentLists          
            }).catch(function(err){
                 console.log(err)
            })
       },
       del:function(did){
            let vm=this;
            layer.confirm("确定删除该评论？", {
                    btn : [ '确定', '取消' ]//按钮
            }, function() {
                vm.$http.delete(vm.APIURL_PREFIX+"/api/wap/commentPls/delete",{ params:{id:did}}).then((response) => {   
                vm. comment()
                layer.msg("删除成功")
              }).catch(function(err){
              
             })   
            });      
       },
       infor(){
           this.$http.get(this.APIURL_PREFIX+'/api/wap/accounts/info').then((response) => {
              this.useid=response.data.data.id
            }).catch(function(err){
              console.log(err)
            });
       }
    },
    watch:{
        pinglun_text:function(naVal,oldVal){
            if(""==naVal){
                this.quxiao=1   
            }else{ 
                this.quxiao=2
                console.log("没了") 
            }
        }
    }
}
</script>

